<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout">

<div layout:fragment="body">
    <form id="loanRequest-form" method="post" th:action="@{/loanRequest/form}" th:object="${loanRequest}" liger="{type : 'ligerForm'}">
        <input type="hidden" th:field="*{id}"/>
        <input type="hidden" th:field="*{estateEvalId}"/>
        <input type="hidden" th:field="*{channelId}"/>
        <input type="hidden" th:field="*{channelNo}"/>
        <input type="hidden" th:field="*{area}"/>
        <input type="hidden" th:field="*{remark}"/>
        <input type="hidden" th:field="*{managerId}"/>
        <input type="hidden" th:field="*{source}"/>
        <input type="hidden" th:field="*{status}"/>

        <table class="l-table-form">
            <tr>
                <th th:text="#{loanRequest.name}"></th>
                <td colspan="3"><input type="text" ltype="text" th:placeholder="#{loanRequest.name}" th:field="*{name}" validate="{required:true}"/></td>
            </tr>
            <tr>
                <th th:text="#{loanRequest.mobile}"></th>
                <td colspan="3"><input type="text" ltype="text" th:placeholder="#{loanRequest.mobile}" th:field="*{mobile}" validate="{required:true}"/></td>
            </tr>
            <tr>
                <th th:text="#{loanRequest.loanAmount}"></th>
                <td><input type="text" ltype="text" th:placeholder="#{loanRequest.loanAmount}" th:field="*{loanAmount}" validate="{required:true}"/></td>
                <th th:text="#{loanRequest.boughtAt}"></th>
                <td>
                    <input type="text" data-width="178" th:placeholder="#{loanRequest.boughtAt}"  th:field="*{boughtAt}" liger="{type:'date'}" validate="{required:true}"/>
                </td>
            </tr>
            <tr>
                <th th:text="#{loanRequest.propertyCoOwner}"></th>
                <td>
                    <input type="text" th:placeholder="#{loanRequest.propertyCoOwner}" data-width="178" name="propertyCoOwnerText" liger="{type:'comboBox',valueFieldID:'propertyCoOwner',configCode:'HAVE_OR_NOT_ENUM'}" validate="{required:true}"/>
                    <input th:field="*{propertyCoOwner}" style="display: none;">
                </td>
                <th th:text="#{loanRequest.isOnlyHouse}"></th>
                <td>
                    <input type="text" th:placeholder="#{loanRequest.isOnlyHouse}" data-width="178" name="isOnlyHouseText" liger="{type:'comboBox',valueFieldID:'isOnlyHouse',configCode:'IF_OR_NOT_ENUM'}" validate="{required:true}"/>
                    <input th:field="*{isOnlyHouse}" style="display: none;">
                </td>
            </tr>
            <tr>
                <th th:text="#{loanRequest.useStatus}"></th>
                <td>
                    <input type="text" th:placeholder="#{loanRequest.useStatus}" data-width="178" name="useStatusText" liger="{type:'comboBox',valueFieldID:'useStatus',configCode:'HOUSE_USE_STATUS_ENUM'}" validate="{required:true}"/>
                    <input th:field="*{useStatus}" style="display: none;">
                </td>
                <th th:text="#{loanRequest.maritalStatus}"></th>
                <td>
                    <input type="text" th:placeholder="#{loanRequest.maritalStatus}" data-width="178" name="maritalStatusText" liger="{type:'comboBox',valueFieldID:'maritalStatus',configCode:'MARITAL_STATUS_ENUM'}" validate="{required:true}"/>
                    <input th:field="*{maritalStatus}" style="display: none;">
                </td>
            </tr>
            <tr>
                <th th:text="#{loanRequest.mortgageStatus}"></th>
                <td>
                    <input type="text" th:placeholder="#{loanRequest.mortgageStatus}" data-width="178" name="mortgageStatusText" liger="{type:'comboBox',valueFieldID:'mortgageStatus',configCode:'HAVE_OR_NOT_ENUM'}" validate="{required:true}"/>
                    <input th:field="*{mortgageStatus}" style="display: none;">
                </td>
                <th th:text="#{loanRequest.isOverdue}"></th>
                <td>
                    <input type="text" th:placeholder="#{loanRequest.isOverdue}" data-width="178" name="isOverdueText" liger="{type:'comboBox',valueFieldID:'isOverdue',configCode:'HAVE_OR_NOT_ENUM', onSelected:'onTypeSelected'}" validate="{required:true}"/>
                    <input th:field="*{isOverdue}" style="display: none;">
                </td>
            </tr>
            <tr id="overdue">
                <th th:text="#{loanRequest.overdueCount}"></th>
                <td colspan="3"><input id="overdueCount" type="text" ltype="text" th:placeholder="#{loanRequest.overdueCount}" th:field="*{overdueCount}"/></td>
            </tr>
            <tr>
                <th th:text="#{loanRequest.fundUse}"></th>
                <td colspan="3"><textarea style="width: 100%;" rows="4" th:placeholder="#{loanRequest.fundUse}" th:field="*{fundUse}" validate="{required:true}"/></td>
            </tr>
        </table>
    </form>
</div>

<script type="text/javascript" layout:fragment="script">/*<![CDATA[*/
var $form;
var $ligerForm;
$(function() {
    $form = $("#loanRequest-form");
    $.metadata.setType("attr", "validate");
    $ligerForm = $form.ligerForm({validate : true});
    onTypeSelected([[${isOverdue}]]);
});

function onTypeSelected(value, text) {
    if(!$ligerForm) {
        return ;
    }
    if(value == [[${T(cn.easy.mortgage.utils.Constants).HAVE}]]) {
        $ligerForm.setFieldValidate("overdueCount", {required: true});
        $("#overdue").show();
    } else {
        $ligerForm.setFieldValidate("overdueCount", {required: false});
        $("#overdue").hide();
    }
}
/*]]>*/</script>

</html>
